﻿<div class="height-100" data-bind="Example02">
    <style>
        .album-container2 {
            position: relative;
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            background-color: #000000;
        }

        .box {
            position: absolute;
            left: 50%;
            top: 50%;
            width: 2rem;
            height: 2rem;
            background-size: 100% 100%;
            transform-style: preserve-3d;
            -webkit-transform-style: preserve-3d;
            transform: rotateX(15deg) translate3d(-50%, -50%, 0);
            -webkit-transform: rotateX(15deg) translate3d(-50%, -50%, 0);
            -webkit-animation: move 5s linear infinite;
        }

        .minbox {
            position: absolute;
            left: 50%;
            top: 40%;
            width: 50%;
            height: 50%;
            transform-style: preserve-3d;
            -webkit-transform-style: preserve-3d;
            transform: translate3d(-50%, -50%, 0);
            -webkit-transform: translate3d(-50%, -50%, 0);
        }

        .minbox li {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
        }

        .maxbox {
            position: absolute;
            left: 0;
            top: -0.2rem;
            width: 8rem;
            height: 4rem;
            -webkit-transform-style: preserve-3d;
        }

        .maxbox li {
            position: absolute;
            left: 0;
            top: 0;
            width: 2rem;
            height: 2rem;
            border: 1px solid #ccc;
            background: #fff;
            opacity: 0.2;
            -webkit-transition: all 1s ease;
        }

        .box:hover ol li {
            left: -1rem;
            top: -1rem;
            width: 4rem;
            height: 4rem;
            opacity: 0.8;
        }

        @keyframes move {
            0% {
                -webkit-transform: rotateX(15deg) rotateY(0deg);
            }
            100% {
                -webkit-transform: rotateX(15deg) rotateY(360deg);
            }
        }
    </style>

    <audio autoplay="autopaly">
        <source src="app/album/example02/renxi.mp3" type="audio/mp3"/>
    </audio>

    <div id="jsi-cherry-container" class="album-container2">
        <div class="box">
            <ul class="minbox" data-bind="foreach: minBoxImgs">
                <li data-bind="style:{'background': background, '-webkit-transform': transform}"></li>
            </ul>
            <ol class="maxbox" data-bind="foreach: maxBoxImgs">
                <li data-bind="style:{'background': background, '-webkit-transform': transform}"></li>
            </ol>
        </div>
    </div>
</div>
